Part-08: CRUD Operation Edit, Delete Data using Angularjs in ASP.NET MVC

4/23/2021 12:00:00 AM

Introduction

In this post, I would like to explain Part-08 Crud Operation Edit, Delete Data using Angular js in ASP.NET MVC.

Steps:

Step-1: Add GetMAsterDataByID()JsonResult in BatchController.cs for get one record.

Go to Solution Explorer > Controllers Folder> BatchController.cs with writing the below code.

  public JsonResult GetMAsterDataByID(int MasterId)
        {

            DataSet ds = aDal.LoadDataByMasterIDDAL(MasterId);
            List<BatchDAO> lists = new List<BatchDAO>();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                lists.Add(new BatchDAO
                {
                    BatchId = Convert.ToInt32(dr["BatchId"]),
                   
                    BatchName = (dr["BatchName"].ToString())


                });

            }

            return Json(lists, JsonRequestBehavior.AllowGet);
        }

Step-2: Add LoadDataByMasterIDDAL() Method in BatchDAL.cs Class.

Go to Solution Explorer > DAL Folder > BatchDAL.cs >in this Class with writing the below code.

public DataSet LoadDataByMasterIDDAL(int MasterId)
        {
            SqlCommand com = new SqlCommand("Get_BatchMaterDataById", conn);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@MasterId", MasterId);
            SqlDataAdapter da = new SqlDataAdapter(com);
            DataSet dss = new DataSet();
            da.Fill(dss);
            return dss;
        }

Step-3: Create store Procedure for get one record Batch.

Go to SQL Server 2014 > dbStudentMangeSystem database> New Query>Create Get_BatchMaterDataById stored procedure with writing the below code.

create proc [dbo].[Get_BatchMaterDataById]
@MasterId int
as
begin
select * from tblBatch where BatchId=@MasterId
end

Step-4: Add a function in BatchControllerJS.js for Load Data.

Go to Solution Explorer > DAL Folder> Scripts Folder > AngularController Folder> BatchControllerJS.js with writing the below code.

$scope.GetOneRecord = function(MasterId) {
        $scope.btnSaveTextBatch = "Update";

        $http.get("/Batch/GetMAsterDataByID?MasterId=" + MasterId).then(function (d) {


            $scope.BatchDAO = d.data[0];
        }, function(error) {
            alert("Faild");
        });
    };

Step-5: Add some codes ListView.cshtml.

Go to Solution Explorer > Views Folder> Batch Folder > ListView.cshtml > in this page with writing the below highlight code.

       

<div ng-app="ABCApp" ng-controller="BatchController">
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Batch</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../Batch/AddNewInfo">Add New Info</a></li>
                         
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">


                <div class="row">

                    <div class="col-md-12">
                        
                        <table class="table table-responsive">
                            <tr>
                                <td>SL#</td>
                                <td>Batch Name</td>
                                <td>Edit</td>
                                <td>Delete</td>
                            </tr>
                            <tr ng-repeat="e in Batch" ng-class-even="'even'" ng-class-odd="'odd'">
                                <td>{{e.SL}}</td>
                                <td>{{e.BatchName}}</td>
                                <td>
                                    <a href="/Batch/AddNewInfo?MasterId={{e.BatchId}}" class="btn btn-warning">Edit</a>

                                </td>
                                <td><a ng-click="DeleteMAsterData(e.BatchId)" class="btn btn-danger">Delete</a> </td>
                            </tr>
                        </table>

                         
                    </div>
                </div>

               



            </div>
        </section>
    </div>
</div>

Step-6: Add some codes Batch entry page( AddNewInfo.cshtml).

Go to Solution Explorer > Views Folder> Batch Folder > AddNewInfo.cshtml > in this page with writing the below highlight code.


<div ng-app="ABCApp" ng-controller="BatchController" data-ng-init="GetOneRecord(@Convert.ToInt32(Request.QueryString["MasterId"]))">
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Batch</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../Batch/ListView">List View</a></li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">


                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <input type="text" ng-model="BatchDAO.BatchName" class="form-control" />
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-3">
                        <input type="button" ng-click="SaveData()" class="btn btn-primary" value="{{btnSaveTextBatch}}" />
                    </div>
                </div>



            </div>
        </section>
    </div>
</div>

Step-7: Run Application.

Step-8: Add Update_Info()JsonResult in BatchController.cs for Update Batch Information.

Go to Solution Explorer > Controllers Folder> BatchController.cs with writing the below code.

  public JsonResult Update_Info(BatchDAO aDao)
        {
            string Mes = "";

            try
            {
                aDal.UpdateInfoDAL(aDao);
                Mes = "Operation Successful!!";
            }
            catch (Exception e)
            {
                Mes = "Operation Faild!!";
            }

            return Json(Mes, JsonRequestBehavior.AllowGet);
        }

Step-9: Add UpdateInfoDAL() Method in BatchDAL.cs Class.

Go to Solution Explorer > DAL Folder > BatchDAL.cs >in this Class with writing the below code.

     public void UpdateInfoDAL(BatchDAO aDao)
        {
            SqlCommand com = new SqlCommand("Update_BatchByMasterId", conn);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@BatchId", aDao.BatchId);
            com.Parameters.AddWithValue("@BatchName", aDao.BatchName);
            conn.Open();
            com.ExecuteNonQuery();
            conn.Close();
        }

Step-10: Create store Procedure for Load Batch.

Go to SQL Server 2014 > dbStudentMangeSystem database> New Query>Create Update_BatchByMasterId stored procedure with writing the below code.

create proc [dbo].[Update_BatchByMasterId]

@BatchId int,
@BatchName  nvarchar(500)
as 

begin

update tblBatch set BatchName=@BatchName where BatchId=@BatchId
end

Step-11: Add a function in BatchControllerJS.js for Load Data.

Go to Solution Explorer > DAL Folder> Scripts Folder > AngularController Folder> BatchControllerJS.js with writing the below highlight code.

  $scope.SaveData = function () {

        if ($scope.btnSaveTextBatch == "Save") {
            $scope.btnSaveTextBatch = "Saving.....";
            $http({
                method: 'POST',
                url: '/Batch/Save_Info',
                data: $scope.BatchDAO
            }).success(function(a) {
                $scope.btnSaveTextBatch = "Save";
                $scope.BatchDAO = null;
                alert(a);
            }).error(function() {
                alert("Faild");
            });
        } else {
            $scope.btnSaveTextBatch = "Updating.....";
            $http({
                method: 'POST',
                url: '/Batch/Update_Info',
                data: $scope.BatchDAO
            }).success(function(a) {
                $scope.btnSaveTextBatch = "Save";
                $scope.BatchDAO = null;
                alert(a);
            }).error(function() {
                alert("Faild");
            });

        }


       

    };

Step-12: Run Application.

Step-13: Add some codes ListView.cshtml.

Go to Solution Explorer > Views Folder> Batch Folder > ListView.cshtml > in this page with writing the below highlight code.



<div ng-app="ABCApp" ng-controller="BatchController">
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Batch</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../Batch/AddNewInfo">Add New Info</a></li>
                         
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">


                <div class="row">

                    <div class="col-md-12">
                        
                        <table class="table table-responsive">
                            <tr>
                                <td>SL#</td>
                                <td>Batch Name</td>
                                <td>Edit</td>
                                <td>Delete</td>
                            </tr>
                            <tr ng-repeat="e in Batch" ng-class-even="'even'" ng-class-odd="'odd'">
                                <td>{{e.SL}}</td>
                                <td>{{e.BatchName}}</td>
                                <td>
                                    <a href="/Batch/AddNewInfo?MasterId={{e.BatchId}}" class="btn btn-warning">Edit</a>

                                </td>
                                <td><a ng-click="DeleteMAsterData(e.BatchId)" class="btn btn-danger">Delete</a> </td>
                            </tr>
                        </table>

                         
                    </div>
                </div>

               



            </div>
        </section>
    </div>
</div>


<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/AngularController/BatchControllerJS.js"></script>

Step-14: Add ReomveDataByMAsterId()JsonResult in BatchController.cs for Delete Batch Information.

Go to Solution Explorer > Controllers Folder> BatchController.cs with writing the below code.

  public JsonResult ReomveDataByMAsterId(int BatchId)
        {

            string result = string.Empty;

            try
            {
                aDal.DeleteInfoDAL(BatchId);
                result = "Operation Deleted";
            }
            catch (Exception)
            {
                result = "Operation Faild";
                
                //throw;
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }

Step-15: Add DeleteInfoDAL() Method in BatchDAL.cs Class.

Go to Solution Explorer > DAL Folder > BatchDAL.cs >in this Class with writing the below code.

public void DeleteInfoDAL(int BatchId)
        {
            SqlCommand com = new SqlCommand("Delete_BatchByMasterId", conn);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@BatchId", BatchId);
          
            conn.Open();
            com.ExecuteNonQuery();
            conn.Close();
        }

Step-16: Create store Procedure for Delete Batch.

Go to SQL Server 2014 > dbStudentMangeSystem database> New Query>Create Delete_BatchByMasterId stored procedure with writing the below code.

create proc [dbo].[Delete_BatchByMasterId]

@BatchId int 
as 

begin

delete from  tblBatch   where BatchId=@BatchId
end

Step-17: Add a function in BatchControllerJS.js for Delete Data.

Go to Solution Explorer > DAL Folder> Scripts Folder > AngularController Folder> BatchControllerJS.js with writing the below code.

$scope.DeleteMAsterData = function (BatchId) {

        $http.get("/Batch/ReomveDataByMAsterId?BatchId=" + BatchId).then(function (d) {

            alert(d.data);
            $http.get("/Batch/LoadData").then(function (d) {

                $scope.Batch = d.data;
            }, function (error) {
                alert("Faild");
            });

        },
            function(error) {
                alert("Faild");
            }
        );
    };

Step-18: Run Application.

About Teacher

Reza Karim

Software Engineer

More about him

Comments

Save Reset

{{data.CreatedOn}} {{data.ProfileName}}

reply

{{item.CreatedOn}} {{item.ProfileName}}

SMS-27: Student profile create and browse profile using Store procedure AngularJS Jquery ASP.NET

SMS-28: Student Result show by search trimester and myasp server registration and login using Jquery & Angular js in ASP.NET MVC

SMS-26: Student Marks list show by search student name and trimester Jquery & Angular js in ASP.NET MVC

SMS-25: Student Course Mark multiple data save using jquery with Stored Procedure & Angular js in ASP.NET MVC

0 Comments

AngularJS

27 Articles